<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="3">
                <el-input v-model="USERID" size="mini" placeholder="请输工号"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input v-model="USERNAME" size="mini" placeholder="请输姓名"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width:100%">
                <el-table-column
                        prop="USERID"
                        label="工号">
                </el-table-column>
                <el-table-column
                        prop="USERNAME"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="SEX"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="FLOOR"
                        label="楼层">
                </el-table-column>
                <el-table-column
                        prop="ROOM"
                        label="房间号">
                </el-table-column>
                <el-table-column
                        prop="CHECKINDATE"
                        label="入住时间"
                >
                </el-table-column>
                <el-table-column
                        prop="STATE"
                        label="住宿状态"
                        :formatter="stateFormat">
                </el-table-column>
                <el-table-column label="操作"  width="250">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toEditBack(scope.$index, scope.row)">通过</el-button>
                        <el-button type="danger" @click="updateIng(scope.$index, scope.row)">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>

        <el-row>
            <el-dialog title="退宿确认" :visible.sync="roomBackFormVisible" width="50%">
                <el-form :model="form">
                    <el-form-item label="工号" :label-width="formLabelWidth">
                        <el-input v-model="form.USERID" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.USERNAME" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-input v-model="form.SEX" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层" :label-width="formLabelWidth">
                        <el-input v-model="form.FLOOR" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="房间号" :label-width="formLabelWidth">
                        <el-input  v-model="form.ROOM" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="住宿状态" :label-width="formLabelWidth" >
                        <el-select v-model="form.STATE" placeholder="请选择" >
                            <el-option label="正常住宿" :value="0"></el-option>
                            <el-option label="已退宿" :value="1"></el-option>
                            <el-option label="退宿中" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="roomBackFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="backIng()">确 定</el-button>
                </div>
            </el-dialog>
    </div>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{//数据
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:20,
                USERID:'',
                USERNAME:'',
                rdm:[],
                roomBackFormVisible:false,
                form: {},//添加或者更新form
                formLabelWidth: "120px",
            },
            created:function () {
                _this =this;
                //初始化数据，加载所有的角色
                axios.get('/rdm/rdmList',{
                    params: {
                        pageNo:1,
                        pageSize:1000,
                    }
                }).then(function (response) {
                    _this.rdm=response.data.page;
                });
                this.loadData();
            },
            methods:{
                //加载数据的方法
                loadData:function () {
                    _this =this;
                    //初始化数据
                    axios.get('/rdm/rdmList', {
                        params: {
                            pageNo:this.currentPage,
                            pageSize:this.pageSize,
                            USERID:this.USERID,
                            USERNAME:this.USERNAME
                        },
                    })
                        .then(function (response) {
                            // handle success  处理成功，回调的方法
                            //console.log(response);
                            //赋值分页列表
                            _this.tableData = response.data.page;
                            //删除最后一页为空时，调到上一页
                            //alert(_this.tableData.length);
                            if(_this.tableData.length==0&&_this.currentPage!=1){
                                _this.currentPage=_this.currentPage-1;
                                _this.loadData();
                            }
                            //赋值总条数
                            _this.total = response.data.total;
                        })
                        .catch(function (error) {
                            // handle error 处理异常
                            //console.log(error);
                        })
                        .then(function () {
                            // always executed  总是执行  相当于finally
                        });
                },
                //每页数量发生变化时
                handleSizeChange:function (v) {
                    this.pageSize=v;
                    this.loadData();
                },
                //当前页数放生变化是
                handleCurrentChange:function (v) {
                    this.currentPage=v;
                    this.loadData();
                },
                stateFormat(row, column) {
                    if (row.STATE === 0) {
                        return '正常住宿'
                    }
                    if (row.STATE === 1) {
                        return '已退宿'
                    }
                    if (row.STATE === 2) {
                        return '退宿中'
                    }
                },
                // 搜索方法
                search: function () {
                    this.currentPage = 1;
                    this.loadData();
                },
                flush() {
                    //刷新当前页
                    location.reload();
                },
                updateIng:function(index, row){
                    _this = this;
                    axios.post('/rdm/updateIng?USERID='+row.USERID).then(function (response) {
                        console.log(response);
                        if (response.status == 200) {
                            if (response.data > 0) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '已成功驳回!'
                                });
                                //重新加载数据
                                _this.loadData();
                            }
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });
                },
                toEditBack:function (index, row) {
                    this.form.avatar = '';
                    //console.log(row);
                    this.form = row;
                    this.roomBackFormVisible=true;
                },
                backIng:function(){
                    _this = this;
                    axios.post('/rdm/backIng?USERID='+this.form.USERID).then(function (response) {
                        console.log(response);
                        if (response.status == 200) {
                            if (response.data > 0) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '已成功退宿!'
                                });
                                _this.roomBackFormVisible=false;
                                //重新加载数据
                                _this.loadData();
                            }
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });

                    axios.post('/rdm/add',this.form).then(function (response) { });

                },
            }
        });
    </script>
</body>
</html>